<template>
  <div id="StorageRecords">
    <breadcrumb content="样本浏览" />
    <div class="bodyContent">
      <Splitpanes class="area" click>

        <Pane size="55">
          <div class="bankContent">
            <!--            v-model="activeName"-->
            <el-tabs type="border-card" v-model="activeLablist" @tab-click="handleClick">
              <el-tab-pane label="当前在库标本" name="inLablist">
              </el-tab-pane>
              <el-tab-pane label="历史存储标本" name="hisLablist">
              </el-tab-pane>
            </el-tabs>
             <StoragedisplayLab ref="storagedisplayLabRef" @clickCell="showLabInfo" @findList="findList" />
          </div>
        </Pane>

        <Pane size="20">
          <div class="bankContent">

            <el-tabs type="border-card" v-model="activeName">
              <el-tab-pane label="标本详情" name="infoForm">
                <SamStoLabInfo ref="samStoLabInfoRef" :currentRow="curSelectRow" @findList="findList" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </Pane>

        <Pane size="25">
          <Splitpanes horizontal class="horizontalLine">
            <Pane size="60">
              <div class="bankContent" style="height: 100%;">
                <el-scrollbar style="height: 100%">
                <breadcrumb content="样本盒信息" />
                <SamstoDistorySelect ref="samstoDistorySelectRef" :currentRow="curSelectRow" />
                </el-scrollbar>
              </div>
            </Pane>
            <Pane size="40">
              <breadcrumb content="冰箱信息" />
              <SamstoFridge ref="samstoFridgeRef" :currentRow="curSelectRow" />
            </Pane>
          </Splitpanes>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted, watch } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '@/stores/store';
import SamstoFridge from "./storagedisplay/SamstoFridge.vue";
import SamstoDistorySelect from "./form/SamstoDistorySelect.vue";
import StoragedisplayLab from "./storagedisplay/StoragedisplayLab.vue";
import SamStoLabInfo from "./storagedisplay/SamStoLabInfo.vue";
import { IsEmpty } from '@/utils/common';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
const curSelectRow = ref({});
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
// 右侧表单:
const storagedisplayLabRef = ref<InstanceType<typeof StoragedisplayLab>>(); //基本信息表单标记ref
const samStoLabInfoRef = ref<InstanceType<typeof SamStoLabInfo>>(); //基本信息表单标记ref
let samstoDistorySelectRef = ref(null);
let samstoFridgeRef = ref(null);
const activeName = ref('infoForm');
const activeLablist = ref('inLablist');

// 方法定义区 =============
onMounted(() => {
    //当前标本
    storagedisplayLabRef.value?.getStatus('0');
});

// 表格选中当前行
function showLabInfo(row: any,rptGroup: any) {
  curSelectRow.value = row;
  samStoLabInfoRef.value?.loading(row,rptGroup);
  samstoDistorySelectRef.value?.selectSpecboxOrder(row);
  samstoFridgeRef.value?.getFridgeData(row);
}

//切换tab
function handleClick(tab){
  activeLablist.value == tab.props.name;
  if (tab.props.name == 'inLablist') {
    //当前标本
    storagedisplayLabRef.value?.getStatus('0');
  } else if (tab.props.name == 'hisLablist') {
    //历史标本
    storagedisplayLabRef.value?.getStatus('1');
  }
}

// 新增
async function addMethod() {
  activeName.value = "infoForm";
}


</script>
<style lang="scss" scoped>
#StorageRecords {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    background-color: #f1f2f6;
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding: 0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding: 15px;
            height: calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent {
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
</style>

